<template>
  <div class="card" :style="noBorder ? { boxShadow: 'none' } : {}">
    <p class="title">{{ title }}</p>
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
defineProps<{
  title: string;
  noBorder?: boolean;
}>();
</script>
<style lang="scss" scoped>
.card {
  position: relative;
  box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f,
    0 5px 12px 4px #00000017;
  border-radius: 3px;
  margin: 16px;
  padding: 16px;
  background-color: #fff;
  display: flex;
  flex-flow: column nowrap;
  & > * {
    flex: 1;
  }
}
.title {
  flex: none;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 20px;
    background-color: $active-color;
    margin-right: 4px;
    vertical-align: top;
  }
}
</style>
